// pages/video/video.js
import request from '../../utils/request'
Page({
  /**
   * 页面的初始数据
   */
  data: {
    videoGroupList: [], // 导航的标签数据
    navId: 0, // 导航的标识
    videoList: [], // 视频列表数据
    videoId: '', //视频Id
    videoUpdateTime: [], // 用来记录video播放的时长
    isTriggered: false, // 标识下拉刷新是否被触发
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 获取导航的数据
    this.getVideoGroupListData()
  },

  async getVideoGroupListData() {
    const { data } = await request('/video/group/list')

    this.setData({
      videoGroupList: data.slice(0, 14),
      navId: data[0].id,
    })
    // 获取视频列表数据
    this.getVideoList(this.data.navId)
  },
  async getVideoList(id) {
    const { datas } = await request('/video/group', {
      id,
    })
    if (datas.length) {
      let index = 0
      datas.map(item => {
        item.index = index
        index++
      })
      this.setData({
        videoList: datas,
        isTriggered: false, // 关闭下拉刷新
      })
      // 关闭消息提示框
      wx.hideLoading()
    } else {
      wx.showToast({
        title: '请稍后重试',
        icon: 'error',
        duration: 2000,
      })
    }
  },

  // 导航栏切换的回调函数
  changeNav(e) {
    // 通过id向event传参如果是number会自动转换成string
    this.setData({
      navId: e.target.id >>> 0, //右移运算符
      videoList: [],
    })
    // 动态获取当前导航对应的视频数据
    // 消息提示框
    wx.showLoading({
      title: '加载中',
    })
    this.getVideoList(this.data.navId)
  },
  //控制video播放和继续播放的回调
  handlePlay(e) {
    /*
    需求 
    1. 再点击播放的事件中找到上一个播放的视频
    2. 在播放新的视频之前关闭上一个播放的视频
    */
    // 关闭上一个播放的视频
    // 视频停止的条件:这个视频存在并且上一次播放的id跟这次不相等
    let vid = e.target.id
    this.vid !== vid && this.videoContext && this.videoContext.stop()
    this.vid = vid
    this.setData({
      videoId: e.target.id,
    })
    this.videoContext = wx.createVideoContext(vid)
    // 判断视频之前有没有播放记录
    // 如果有就跳转至指定的播放位置,如果没有就重新播放
    let findTtem = this.data.videoUpdateTime.find(item => item.vid === vid)
    if (findTtem) {
      this.videoContext.seek(findTtem.currentTime)
    }
    this.videoContext.play()
  },
  // 监听视频播放进度的回调
  handleTimeUpdate(e) {
    let timeObj = { vid: e.target.id, currentTime: e.detail.currentTime }
    let { videoUpdateTime } = this.data
    /*  
    思路: 判断记录播放时长的videoUpdateTime数组中是否有当前视频的播放记录
    1. 如果有，就在原有的记录中修改播放时间为当前的播放时间
    2. 如果没有，需要在数组中添加当前的播放对象
    */
    let videoItem = videoUpdateTime.find(item => item.vid === timeObj.vid)
    if (videoItem) {
      videoItem.currentTime = timeObj.currentTime
    } else {
      videoUpdateTime.push(timeObj)
    }
    this.setData({
      videoUpdateTime,
    })
  },
  // 监听视频完成播放的回调
  handleEnded(e) {
    let vid = e.target.id
    let { videoUpdateTime } = this.data
    let i = videoUpdateTime.findIndex(item => item.vid === vid)
    videoUpdateTime.splice(i, 1)
    this.setData({
      videoUpdateTime,
    })
  },
  // 自定义下拉刷新的回调
  handleRefresher() {
    this.setData({
      isTriggered: true,
    })
    // 再次发送请求，获取最新的视频列表数据
    this.getVideoList(this.data.navId)
  },
  // 监听到滚动到底部回调
  handleToLower() {
    //1.后端分页 2.前端分页
    // 没办法实现，暂时没提供分页api
    let { videoList } = this.data
    videoList = videoList.concat(videoList)
    this.setData({
      videoList,
    })
  },
  toSearch() {
    wx.navigateTo({
      url: '/pages/search/search',
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function ({ from }) {
    console.log(from)
    if (from === 'button') {
      return {
        title: '按钮触发的转发',
        imageUrl: '/static/images/nvsheng.jpg',
      }
    }
  },
})
